<template>
  <view class="circle-item flex v-start">
    <image src="/static/missing-face.png" class="thumb flex-item-keep-style"></image>
    <view class="detail flex-item-fill">
      <view class="name">刘芳芳</view>
      <view class="title">副教授</view>
      <view class="content">
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
      </view>
      <view class="actions flex v-center h-s-b">
        <view class="date flex v-center">
          09-04 18:08
          <view class="del">删除</view>
        </view>
        <view class="reply">
          <u-icon name="chat-fill" size="22" color="#767676"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'CircleListItem',
    setup() {
      return {};
    },
  });
</script>
<style scoped lang="scss">
  .circle-item {
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;
    border-bottom: 2rpx solid #eee;
    .thumb {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background: #eee;
      margin-right: 24rpx;
    }
    .detail {
      padding-top: 8rpx;
      .name {
        font-size: 32rpx;
        font-family:
          PingFangSC-Medium,
          PingFang SC;
        font-weight: 500;
        color: #1a1c2c;
        margin-bottom: 8rpx;
      }
      .title {
        font-size: 24rpx;
        color: #767676;
        margin-bottom: 28rpx;
      }
      .content {
        font-size: 28rpx;
        color: #1a1c2c;
        line-height: 40rpx;
        margin-bottom: 16rpx;
        text-align: justify;
      }
      .actions {
        font-size: 24rpx;
        color: #767676;
        .del {
          margin-left: 24rpx;
          color: #4399fc;
          opacity: 0.8;
        }
      }
    }
  }
</style>
